<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <style>
        .input{
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        /*.outer-box{*/
            /*margin-left: 850px;*/
            /*margin-top: 200px;*/
        /*}*/
        .bot{
                margin-left: 580px;
                margin-top: 100px;
        }
        .btu{
            margin-left: 40px;
            margin-top: 20px;
            word-spacing: 30px;
        }
        #id1{
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: pink;
        }

        .hide{
            width: 100px;
            height: 30px;
            display: inline-block;
            background-color: aqua;
        }
    </style>
</head>
<body>

<div class="outer-box">
    <div class="bot">
        <input type="text" class="input" value=""><br>
        <div class="btu">
            <button class="begin-btu" onclick="begin()">开始</button>
            <button class="end-btu" onclick="cancle()">结束</button>
        </div>
    </div>
</div>

<div class="timerout">
    <input id="id1" type="text" value="" onmouseover="timer()" onmouseleave="canle_timer()">
</div>
<div class="hide">这是个提示框</div>
<input type="button" value="点赞" onclick="foucs()">
<script>

    function showtime() {
        var  data = new Date().toLocaleString();
        var ele=document.getElementsByClassName('input')[0];
        console.log("----",ele);
        ele.value = data;
        console.log(data)
    }
    var clock;
    function begin() {
        if (clock==undefined){
            showtime();
            clock =setInterval(showtime,1000)
        }
    }
    function cancle() {
        clearInterval(clock);
        clock = undefined;
    }
    var fouce;
    function timer() {
        var timer = document.getElementById('id1');
        timer.value=new Date();
        fouce =setTimeout(fun1, 3000);

    }
    function fun1() {
        document.getElementsByClassName('hide')[0].style.display='none'
    }
    function foucs() {
        alert("已经点过赞了");

    }



</script>

</body>
</html>